<template>
  <view class="h-screen bg-white relative overflow-hidden">
    <!-- 高端状态栏 -->
    <view class="flex justify-between items-center px-5 py-2 bg-transparent text-sm font-semibold h-11 relative z-10"
      style="padding-top: calc(8px + var(--status-bar-height));">
      <view class="status-left flex items-center">
        <text class="premium-time mr-1">{{ currentTime }}</text>
        <text class="premium-date text-xs opacity-70">{{ currentDay }}</text>
      </view>
      <view class="status-center flex items-center justify-center">
        <view
          class="brand-logo w-6 h-6 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold">
          E
        </view>
      </view>
      <view class="flex gap-1 items-center">
        <text class="iconfont icon-signal text-xs opacity-90 ml-1"></text>
        <text class="iconfont icon-wifi text-xs opacity-90 ml-1"></text>
        <text class="iconfont icon-battery text-xs opacity-90 ml-1"></text>
      </view>
    </view>

    <!-- 背景装饰 -->
    <view class="absolute inset-0 z-0 overflow-hidden">
      <view class="bg-gradient-primary absolute top-0 left-0 w-full h-third opacity-20"
        style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);"></view>
      <view class="bg-particles">
        <view v-for="(_, i) in 5" :key="i" class="particle absolute rounded-full bg-indigo-200 opacity-30" :style="{
          width: `${20 + Math.random() * 30}px`,
          height: `${20 + Math.random() * 30}px`,
          top: `${Math.random() * 100}%`,
          left: `${Math.random() * 100}%`,
          animationDelay: `${Math.random() * 5}s`,
          animationDuration: `${15 + Math.random() * 15}s`
        }"></view>
      </view>
      <view class="bg-mesh absolute inset-0 opacity-10">
        <view class="mesh-gradient"></view>
      </view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view scroll-y class="h-full pt-2 pb-16"
      style="height: calc(100vh - var(--status-bar-height) - 44px - 60px);">
      <!-- 高端首页 -->
      <view class="premium-page active px-5">
        <!-- 奢华顶部问候 -->
        <view class="luxury-header flex justify-between items-center mb-6">
          <view class="premium-greeting">
            <view class="greeting-container">
              <view class="luxury-title">
                <text class="text-2xl font-bold text-slate-800 block">{{ greeting }}</text>
                <text class="text-2xl font-bold text-indigo-600 block">{{ username }}</text>
              </view>
              <text class="text-sm text-slate-500 mt-1">今天将是充满可能的一天</text>
            </view>
          </view>
          <view class="premium-avatar-section">
            <view class="avatar-container relative">
              <view
                class="avatar-ring absolute inset-0 rounded-full border-2 border-indigo-300 opacity-70 animate-pulse">
              </view>
              <image src="/static/avatar.jpg"
                class="w-12 h-12 rounded-full object-cover border-2 border-white shadow-md"></image>
              <view class="status-indicator absolute bottom-0 right-0">
                <view class="w-3 h-3 bg-green-500 rounded-full border-2 border-white"></view>
              </view>
            </view>
          </view>
        </view>

        <!-- 奢华每日灵感卡片 -->
        <view
          class="luxury-inspiration-card relative mb-8 rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-500 to-purple-600 p-5 shadow-lg">
          <view class="card-glow absolute inset-0 opacity-20 bg-white blur-xl"></view>
          <view class="card-surface relative z-10">
            <view class="inspiration-header flex justify-between items-center mb-4">
              <view class="flex items-center">
                <view class="inspiration-icon relative mr-3">
                  <view class="icon-glow absolute inset-0 bg-white opacity-30 rounded-full blur-sm"></view>
                  <view class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
                    <text class="iconfont icon-star text-white text-lg"></text>
                  </view>
                </view>
                <view class="inspiration-meta">
                  <text class="text-xs text-white text-opacity-80 block">每日灵感</text>
                  <text class="text-sm text-white font-medium">{{ formattedDate }}</text>
                </view>
              </view>
              <button
                class="luxury-refresh-btn w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center"
                @tap="refreshQuote">
                <text class="iconfont icon-refresh text-white"></text>
              </button>
            </view>
            <view class="inspiration-content">
              <text class="luxury-quote text-white text-base font-medium leading-relaxed">
                {{ dailyQuote }}
              </text>
              <view class="quote-signature mt-3">
                <text class="text-white text-opacity-80 text-sm">— 致更好的自己</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 精英习惯追踪 -->
        <view class="luxury-habits-section mb-8">
          <view class="premium-section-header flex justify-between items-center mb-4">
            <view class="section-title-container flex items-center">
              <view class="section-icon w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                <text class="iconfont icon-trophy text-indigo-600"></text>
              </view>
              <text class="section-title text-lg font-bold text-slate-800">今日习惯</text>
            </view>
            <button
              class="premium-add-btn w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center shadow-sm"
              @tap="addHabit">
              <view class="btn-glow absolute inset-0 bg-indigo-300 opacity-30 rounded-full blur-sm"></view>
              <text class="iconfont icon-plus text-white"></text>
            </button>
          </view>

          <view class="luxury-habits-grid">
            <view v-for="(habit, index) in habits" :key="index"
              class="premium-habit-card relative rounded-xl overflow-hidden border border-slate-100 shadow-sm"
              :class="{ 'bg-indigo-50': habit.completed, 'bg-white': !habit.completed }">
              <view class="card-backdrop absolute inset-0 opacity-5"></view>
              <view class="habit-surface p-4 relative z-10">
                <view class="flex items-center">
                  <view class="habit-checkbox-luxury mr-3">
                    <checkbox :checked="habit.completed" @change="toggleHabit(index)" color="#667eea"
                      style="transform:scale(0.9)" />
                  </view>
                  <view class="habit-details flex-1">
                    <text class="habit-title text-base font-medium text-slate-800"
                      :class="{ 'opacity-60': habit.completed }">{{ habit.title }}</text>
                    <view class="habit-meta flex items-center mt-1">
                      <text class="time-badge text-xs bg-slate-100 px-2 py-half rounded-full text-slate-600">{{
                        habit.time }}</text>
                      <text class="status-badge ml-2 text-xs"
                        :class="habit.completed ? 'text-green-600' : 'text-amber-600'">
                        {{ habit.completed ? '已完成' : '待完成' }}
                      </text>
                    </view>
                  </view>
                  <view class="habit-streak-luxury">
                    <view class="streak-visual flex items-center">
                      <text class="streak-number text-sm font-bold text-indigo-600 mr-1">{{ habit.streak }}</text>
                      <view class="streak-icon">
                        <text class="iconfont icon-fire text-amber-500"></text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 高级目标规划 -->
        <view class="luxury-goals-section mb-8">
          <view class="premium-section-header flex justify-between items-center mb-4">
            <view class="section-title-container flex items-center">
              <view class="section-icon w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                <text class="iconfont icon-rocket text-indigo-600"></text>
              </view>
              <text class="section-title text-lg font-bold text-slate-800">未来规划</text>
            </view>
            <button
              class="premium-add-btn w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center shadow-sm"
              @tap="addGoal">
              <view class="btn-glow absolute inset-0 bg-indigo-300 opacity-30 rounded-full blur-sm"></view>
              <text class="iconfont icon-plus text-white"></text>
            </button>
          </view>

          <view class="luxury-goals-container">
            <view v-for="(goal, index) in goals" :key="index"
              class="premium-goal-card relative rounded-xl overflow-hidden border border-slate-100 shadow-sm bg-white">
              <view class="goal-backdrop absolute inset-0 opacity-5"></view>
              <view class="goal-surface p-4 relative z-10 flex">
                <view class="goal-icon-luxury mr-4">
                  <view class="icon-backdrop absolute inset-0 opacity-10 rounded-full"></view>
                  <view class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
                    <text class="iconfont" :class="goal.icon" style="color: #667eea;"></text>
                  </view>
                </view>
                <view class="goal-content-luxury flex-1">
                  <view class="goal-header-luxury flex justify-between items-center mb-1">
                    <text class="goal-title text-base font-medium text-slate-800">{{ goal.title }}</text>
                    <text class="goal-deadline-premium text-xs text-slate-500">{{ goal.deadline }}</text>
                  </view>
                  <text class="goal-description text-sm text-slate-600 mb-2">{{ goal.description }}</text>
                  <view class="goal-progress-luxury">
                    <view class="progress-track h-1-5 bg-slate-100 rounded-full overflow-hidden">
                      <view class="progress-fill-luxury h-full bg-indigo-500 rounded-full"
                        :style="{ width: goal.progress + '%' }"></view>
                      <view class="progress-glow absolute inset-0 opacity-30"></view>
                    </view>
                    <text class="progress-text-luxury text-xs text-slate-500 mt-1">{{ goal.progress }}%</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 智能统计面板 -->
        <view class="luxury-stats-section mb-8">
          <view class="premium-section-header flex items-center mb-4">
            <view class="section-icon w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
              <text class="iconfont icon-chart-line text-indigo-600"></text>
            </view>
            <text class="section-title text-lg font-bold text-slate-800">今日数据</text>
          </view>

          <view class="luxury-stats-grid grid grid-cols-3 gap-3">
            <view v-for="(stat, index) in stats" :key="index"
              class="premium-stat-card relative rounded-xl overflow-hidden border border-slate-100 shadow-sm bg-white p-3">
              <view class="stat-backdrop absolute inset-0 opacity-5"></view>
              <view class="stat-content flex flex-col items-center justify-center">
                <view class="stat-icon mb-2">
                  <text class="iconfont" :class="stat.icon" style="color: #667eea;"></text>
                </view>
                <text class="stat-value text-lg font-bold text-slate-800">{{ stat.value }}</text>
                <text class="stat-label text-xs text-slate-500 mt-1">{{ stat.label }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="fixed bottom-0 left-0 right-0 h-16 bg-white bg-opacity-80 border-t border-slate-100 shadow-sm z-50">
      <view class="flex h-full">
        <navigator url="/pages/index/index" open-type="switchTab"
          class="flex-1 flex flex-col items-center justify-center">
          <view class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mb-half">
            <text class="iconfont icon-home text-indigo-600"></text>
          </view>
          <text class="text-xs font-medium text-indigo-600">首页</text>
        </navigator>
        <navigator url="/pages/projects/index" open-type="switchTab"
          class="flex-1 flex flex-col items-center justify-center">
          <view class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mb-half">
            <text class="iconfont icon-briefcase text-slate-500"></text>
          </view>
          <text class="text-xs font-medium text-slate-500">项目</text>
        </navigator>
        <navigator url="/pages/profile/index" open-type="switchTab"
          class="flex-1 flex flex-col items-center justify-center">
          <view class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mb-half">
            <text class="iconfont icon-user-circle text-slate-500"></text>
          </view>
          <text class="text-xs font-medium text-slate-500">我的</text>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';

// 用户信息
const username = ref('张三');

// 时间相关
const currentTime = ref('');
const currentDay = ref('');
const formattedDate = ref('');

// 根据时间获取问候语
const greeting = computed(() => {
  const hour = new Date().getHours();
  if (hour < 6) return '凌晨好';
  if (hour < 9) return '早上好';
  if (hour < 12) return '上午好';
  if (hour < 14) return '中午好';
  if (hour < 18) return '下午好';
  if (hour < 22) return '晚上好';
  return '夜深了';
});

// 更新时间
const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  currentTime.value = `${hours}:${minutes}`;

  const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  currentDay.value = days[now.getDay()];

  const month = now.getMonth() + 1;
  const date = now.getDate();
  formattedDate.value = `${month}月${date}日`;
};

// 每日名言
const quotes = [
  '每一个伟大的梦想都始于一个敢于追求的人。今天，让我们继续前行。',
  '成功不是偶然，而是日复一日的积累与坚持。',
  '不要等待机会，而要创造机会。',
  '最困难的时刻，往往是黎明前的黑暗。',
  '生活不是等待风暴过去，而是学会在雨中翩翩起舞。'
];
const dailyQuote = ref(quotes[0]);

// 刷新每日名言
const refreshQuote = () => {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  dailyQuote.value = quotes[randomIndex];
};

// 习惯数据
const habits = ref([
  {
    id: 1,
    title: '晨练俯卧撑',
    time: '06:30',
    completed: true,
    streak: 7
  },
  {
    id: 2,
    title: '深度阅读',
    time: '21:00',
    completed: false,
    streak: 12
  },
  {
    id: 3,
    title: '创意写作',
    time: '22:30',
    completed: false,
    streak: 3
  }
]);

// 切换习惯完成状态
const toggleHabit = (index: number) => {
  habits.value[index].completed = !habits.value[index].completed;
};

// 添加新习惯
const addHabit = () => {
  uni.navigateTo({
    url: '/subPages/habit/add'
  });
};

// 目标数据
const goals = ref([
  {
    id: 1,
    title: '日语精通',
    description: '掌握高级对话和书面表达',
    deadline: '12月完成',
    progress: 35,
    icon: 'icon-language'
  },
  {
    id: 2,
    title: '全栈项目',
    description: '构建个人品牌作品集',
    deadline: '10月完成',
    progress: 68,
    icon: 'icon-code'
  },
  {
    id: 3,
    title: '马拉松挑战',
    description: '突破极限，完成全程挑战',
    deadline: '2025年3月',
    progress: 22,
    icon: 'icon-running'
  }
]);

// 添加新目标
const addGoal = () => {
  uni.navigateTo({
    url: '/subPages/goal/add'
  });
};

// 统计数据
const stats = ref([
  {
    icon: 'icon-check-circle',
    value: '1/3',
    label: '已完成习惯'
  },
  {
    icon: 'icon-fire',
    value: '12',
    label: '最长连击'
  },
  {
    icon: 'icon-trophy',
    value: '42%',
    label: '总体进度'
  }
]);

// 定时器
let timer: number;

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 60000) as unknown as number;
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style>
/* 浮动粒子动画 */
.particle {
  animation: floatParticle 15s infinite ease-in-out;
}

@keyframes floatParticle {

  0%,
  100% {
    transform: translateY(0) translateX(0);
  }

  25% {
    transform: translateY(-30px) translateX(20px);
  }

  50% {
    transform: translateY(-15px) translateX(-20px);
  }

  75% {
    transform: translateY(30px) translateX(10px);
  }
}
</style>